<!DOCTYPE HTML>
<html>
  <head>
	
	<script type="text/javascript" src="scripts/jquery-1.4.js"></script>
	<script type="text/javascript" src="scripts/jqia2.support.js"></script>
    <script type="text/javascript" src="menu.js"></script>
	<script type="text/javascript" src="draggable.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	
	<title>Estudio HTML5</title>
    
	<meta charset="UTF-8">	
	
	<style>
		body {background-color: white;}
		div {text-align: center;}
		canvas{position: relative;top: 50px;}
	</style>
	
	<script>
		var canvas, context, w , h ;
		var puntuacion = 0;
		var puntosItems = [0,50,100,500];
		var	bolas = [], barra , blocks=[] , items=[];
		var vConstante = 100;		
		
		var img_bola = new Image();
		img_bola.addEventListener("load", start, false);
		img_bola.src = "images/bola.gif";
		var img_barra = new Image();
		img_barra.src = "images/barra.png";		
		var img_block = new Image();
		img_block.src = "images/block.png";
		var img_fresa = new Image();
		img_fresa.src = "images/fresa.png";
		var img_manzana = new Image();
		img_manzana.src = "images/manzana.png";
		var img_estrella = new Image();
		img_estrella.src = "images/estrella.png";
		
		var game = true;
		
		function start(){
			//START
			if(bolas[0]== null){
				canvas = document.getElementById("c");
				context = canvas.getContext("2d");
				w = canvas.width = 500;
				h = canvas.height = 500;
				game = true;
				
				var map=[[0,0,1,1,1,1,1,0,1,1],
						 [0,0,1,1,0,1,1,0,1,0],
						 [0,0,1,1,1,1,1,0,1,1],
						 [1,0,1,1,0,1,1,1,1,1],
						 [1,1,1,1,0,1,0,1,0,1]];
						 
				chargeMap(map);
				barra = new Barra();
				bolas.push(new Bola());								
				window.setInterval(update , 1000/50);
			
			//RESTART
			}else{
				game = true;
				barra = new Barra();
				bolas.shift();				
				bolas.push(new Bola());
			}
		}
		
		function update(){
			if(game == true){
				movebolas();
				moveBarra();
				itemsMove();
				colision();
				controls();
				paint();
			}
		}
	
		function movebolas(){
			for(var i = 0 ; i < bolas.length ; i++){
				bolas[i].move();
			}
		}
		
		function moveBarra(){
			barra.move();
		}
		
		function itemsMove()
		{
			for(var i=0 ; i<items.length ; i++){
				items[i].move();
			}
		}
		
		function paint(){
			var i;
			context.fillStyle = "black";
			context.fillRect(0, 0, w, h);
			for( i=0 ; i<bolas.length ; i++){
				context.drawImage(img_bola, bolas[i].x, bolas[i].y,bolas[i].w,bolas[i].h);				
			}
			context.drawImage(img_barra, barra.x, barra.y, barra.w, barra.h);	
			
			for( i=0 ; i<blocks.length ; i++){
				context.drawImage(img_block, blocks[i].x, blocks[i].y, blocks[i].w, blocks[i].h);				
			}
			
			for(i=0; i<items.length ; i++){
				switch(items[i].type){
					case 1:
						context.drawImage(img_fresa, items[i].x, items[i].y, items[i].w, items[i].h);
					break;
					
					case 2:
						context.drawImage(img_manzana, items[i].x, items[i].y, items[i].w, items[i].h);
					break;
					
					case 3:
						context.drawImage(img_estrella, items[i].x, items[i].y, items[i].w, items[i].h);
					break;
				}		
			}
			
			//HUD
			context.font="12px Arial";
			context.fillStyle = 'white';
			context.fillText("Puntos: " + puntuacion,10,480);
		
		}
		
		function Bola(){
			this.x = barra.x + barra.w/2;
			this.y = barra.y - barra.h;
			this.vx = 0;
			this.vy = 0;
			this.w = 20;
			this.h = 20;
			this.started = false;
		}
		
		function Barra(){
			this.x = 250;
			this.y = 400;
			this.vx = 0;
			this.w = 64;
			this.h = 16;
			this.m = 0;
		}
		
		function Block(x,y){
			this.x = x;
			this.y = y;
			this.w = 50;
			this.h = 25;
		}
		
		function Item(x,y,type){
			this.x = x;
			this.y = y;
			this.w = 32;
			this.h = 32;
			this.vy = 5;
			this.type = type;
		}
		
		Block.prototype = {
			move: function() {			
				this.x += this.vx;
				this.y += this.vy;
			},
		}
		
		Bola.prototype = {
			start: function(){
				if(this.started == false){
					this.started = true;
					this.vx = Math.random()*5;
					this.vy = 0;
					if(this.vx  < vConstante){
						this.vy = Math.sqrt((this.vx - vConstante) * -1)*-1;
					}else{
						this.vy = Math.sqrt(this.vx - vConstante);
					}			
				}	
			},
			move: function() {			
				this.x += this.vx;
				this.y += this.vy;
			},
		}
		
		Barra.prototype = {
			move: function() {			
				this.x += this.vx;
			},
			
			estado: function(est){
				switch(est){
					case 0:
						this.w = 64;
						this.h = 16;
					break;
					
					case 1:
						this.w = 96;
					break;
					
					case 2:
						this.w = 64;
					break;
					
					case 3:
						this.w = 32;
					break;
					
				}
			},
		}
		
		
		Item.prototype = {
			move: function() {
				this.y += this.vy;
			},
		}
		
		function colision(){
			//Rebote con paredes	
			var auxLength = bolas.length;
			var colPared = 3;
			var colBarra = 3;
			
			for(var i=0 ; i< auxLength ; i++){
				if (bolas[i].x < colPared){
					bolas[i].vx = bolas[i].vx *-1;
				}				
				if(bolas[i].x > 500 - colPared - bolas[i].w){
					bolas[i].vx = bolas[i].vx *-1;
				}
				
				if (bolas[i].y < colPared){
					bolas[i].vy = bolas[i].vy *-1;
				}				
				if(bolas[i].y > 500 - colPared - bolas[i].h){
					bolas[i].vy = bolas[i].vy *-1;
				}
			
				//Rebote con la barra
				if((bolas[i].x + bolas[i].w + colBarra  >= barra.x && bolas[i].x  <= barra.x + barra.w ) &&
				  (bolas[i].y + bolas[i].h + colBarra >= barra.y && bolas[i].y  <= barra.y + barra.h )&& (bolas[i].started)){
					
					if(bolas[i].x + bolas[i].w/2 > barra.x + barra.w / 4 * 3){
						if(bolas[i].vx< 0){ bolas[i].vx = -5 }else{ bolas[i].vx = 5; }
					}else if(bolas[i].x + bolas[i].w/2 > barra.x + barra.w / 4 * 2){
						if(bolas[i].vx< 0){ bolas[i].vx = -3; }else{ bolas[i].vx = 3; }						
					}else if(bolas[i].x + bolas[i].w/2 > barra.x + barra.w / 4 * 1 ){
						if(bolas[i].vx< 0){ bolas[i].vx =  3; }else{ bolas[i].vx = -3; }
					}else{
						if(bolas[i].vx< 0){ bolas[i].vx =  2; }else{ bolas[i].vx = -5; }					
					}
					bolas[i].vy = bolas[i].vy *-1;		
				}
				if(bolas[i].y + bolas[i].h +5 > 500){
					bolas.splice(i,1);
				}
				
				
				//Rebote con los bloques
				for(var x=0; x< blocks.length;x++){
					if((bolas[i].x + bolas[i].w >= blocks[x].x && bolas[i].x <= blocks[x].x + blocks[i].w )&&
					   (bolas[i].y + bolas[i].h >= blocks[x].y && bolas[i].y <= blocks[x].y + blocks[i].h )){
							
						if(bolas[i].x + bolas[i].w/2 < blocks[x].x + blocks[i].h){
							bolas[i].vx = bolas[i].vx *-1;						
						}else{
							bolas[i].vx = bolas[i].vx ;						
						}
							bolas[i].vy = bolas[i].vy *-1;
							deleteBlock( x );
					   }
				}
				
				//Rebote con los items
				for(var x=0; x< items.length;x++){
					if(items[x].y > 500){
						items.splice(x,1);						
					}
					
					if((items[x].x + items[x].w + colBarra  >= barra.x && items[x].x  <= barra.x + barra.w ) &&
					(items[x].y + items[x].h + colBarra >= barra.y && items[x].y  <= barra.y + barra.h )){
						barra.estado(items[x].type);
						puntuacion = puntuacion + puntosItems[items[x].type];
						items.splice(x,1);						
					}
				}
				
				//Colision barra con las paredes
				if(barra.m ==  -1){
					if(barra.x - barra.vx <= 0 ){
						barra.vx = 0;
						barra.m = 0;
					}
				}else if(barra.m == 1){
					if(barra.x + barra.w + barra.vx >= 500 ){
						barra.vx = 0;
						barra.m = 0;				
					}
				}
			}			
		}
		
		
		function controls(){
			$(document).keydown(function (e) {
				switch(e.which) {
					case 38: //UP
						for(var i=0; i< bolas.length; i++){
							bolas[i].start();							
						}
						break;
					case 39: //Right
						if(barra.x + barra.w + barra.vx <= 500 ){
							barra.vx = 8;
							barra.m = 1;
						}
						break;
					case 40: //Down
						break;
					case 37: //left
						if(barra.x - barra.vx >= 0 ){
							barra.vx = -8;
							barra.m = -1;
						}
						break;
				}
			});
			
		
		$(document).keyup(function (e) {
			switch(e.which) {
				case 38: //UP
					break;
				case 39: //Right
					barra.vx = 0;
					barra.m = 0;
					break;
				case 40: // Down
					break;
				case 37: //left
					barra.vx = 0;
					barra.m = 0;
					break;
			}
		});
		}
		
		function chargeMap(map){
			var x,y, aux=[];
			
			for(y=0;y<5;y++){
				for(x=0;x<10;x++){
					aux = map[y];
					if(aux[x]==1){
						blocks.push(new Block(x*50,y*25));
					}
				}
			}
			
		}
		
		function deleteBlock(posBlock){
			var rand = Math.random()*10 ;
			var FRESA = 1, MANZANA = 2, ESTRELLA = 3;
			switch(Math.floor(rand)){
				case 1:
					items.push(new Item(blocks[posBlock].x, blocks[posBlock].y , FRESA));
				break;
				
				case 2:
					items.push(new Item(blocks[posBlock].x, blocks[posBlock].y , MANZANA));
				break;
				
				case 3:
					items.push(new Item(blocks[posBlock].x, blocks[posBlock].y , ESTRELLA));
				break;
			}
			
			blocks.splice(posBlock,1);
		}
			

	</script>
	

  </head>
  
  <body>
		<noscript>
			No tienes habilitado el javascript. Para hacer funcionar esta pagina necesitas tenerlo funcionando. 
		</noscript>
		<div> 
		</div>
		<div>
			<canvas id="c">
				No te soporto el navegador a canvas tampoco.
			</canvas>
		</div>
  </body>
</html>

